# UnoCSS

[UnoCSS](https://unocss.dev/) is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated, and all the CSS utilities are provided via presets.

You can integrate UnoCSS in Rsbuild via [@unocss/webpack](https://npmjs.com/package/@unocss/webpack).

## Installing UnoCSS

You need to install `@unocss/webpack` first.

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @unocss/webpack -D" />

## Configuring plugin

Register the `UnoCSSRspackPlugin` plugin in [tools.rspack](/config/tools/rspack):

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';

export default defineConfig({
  tools: {
    rspack: {
      plugins: [
        UnoCSSRspackPlugin({
          // options
        }),
      ],
    },
  },
});
```

You can add UnoCSS Presets via the options of `UnoCSSRspackPlugin`, for example:

```ts title="rsbuild.config.ts"
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { UnoCSSRspackPlugin } from '@unocss/webpack/rspack';
import { presetAttributify } from '@unocss/preset-attributify';
import { presetUno } from '@unocss/preset-uno';

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: {
      plugins: [
        UnoCSSRspackPlugin({
          presets: [presetUno(), presetAttributify()],
        }),
      ],
    },
  },
});
```

:::tip
The above configuration is for reference only and can be modified to suit the needs of your project.
:::

## Importing CSS

In the JavaScript entry file, import `uno.css`:

```js title="main.js"
import 'uno.css';
```

## Done

You have now completed all the steps to integrate UnoCSS in Rsbuild!

You can use UnoCSS's utility classes in any component or HTML, such as:

```html
<h1 class="px-2 items-center justify-between">Hello world!</h1>
```

For more usage details, refer to the [UnoCSS documentation](https://unocss.dev/).

## VS Code extension

UnoCSS provides a [VS Code Extension](https://unocss.dev/integrations/vscode) plugin for VS Code to decoration and tooltip for matched utilities.

You can install this plugin in VS Code to enable more intelligent features.
